<template>
  <div class="i-table-no-border">
    <div>
      <Row type="flex">
        <Col class="marginTop10" span="6"
          >调研时间：{{ viewInfo.createOpeTime }}</Col
        >
        <Col class="marginTop10" span="6"
          >调研部门：{{ viewInfo.departmentName }}</Col
        >
        <Col class="marginTop10" span="6"
          >调研人：{{ viewInfo.createOperName }}</Col
        >
        <Col class="marginTop10" span="6"
          >调研区域：{{ viewInfo.surveyAreaName }}</Col
        >
        <Col class="marginTop10" span="6">单据号：{{ viewInfo.recordNo }}</Col>
        <Col class="marginTop10" span="24"
          >调研目的：{{ viewInfo.surveyTarget }}</Col
        >
        <Col class="marginTop10" span="24"
          >调研总结：{{ viewInfo.surveyReault }}</Col
        >
      </Row>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="issueState">
        <span>{{ row.issueState }}</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="row.actions.length > 2">
          <a @click="handleClickMore(row.actions[0].name, row)">{{
            row.actions ? row.actions[0].label : ""
          }}</a>
          <Divider type="vertical" />
          <Dropdown @on-click="(name) => handleClickMore(name, row)" transfer>
            <a
              >更多
              <Icon type="ios-arrow-down" />
            </a>
            <DropdownMenu slot="list">
              <DropdownItem
                v-for="(item, i) in row.actions.slice(1)"
                :key="i"
                :name="item.name"
              >
                {{ item.label }}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div v-else>
          <a
            v-if="row.actions"
            @click="handleClickMore(row.actions[0].name, row)"
            >{{ row.actions[0].label }}</a
          >
          <Divider
            v-if="row.actions && row.actions.length > 1"
            type="vertical"
          />
          <a
            v-if="row.actions && row.actions.length > 1"
            @click="handleClickMore(row.actions[1].name, row)"
            >{{ row.actions[1].label }}</a
          >
        </div>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码

import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件

import tableBtns from './tableBtns'; // 表格内部操作按钮

export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    },
    orderState: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  watch: {
    orderState (n, o) {
      this.getData();
    }
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableBtns
  },
  data () {
    return {
      model1: '',
      actions: [],
      specTableData: [],
      util: util,
      viewInfo: {},
      basePath: this.dynamicData.basePath, // 拼接基础路径
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        }
      ],
      tableDataList: [],
      columns: [
        {
          title: '分类编码',
          key: 'categoryNo',
          fixed: 'left',
          minWidth: 120
        },
        {
          title: '分类名称',
          key: 'categoryName',
          minWidth: 160
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
          minWidth: 160
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          align: 'center',
          minWidth: 120
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center',
          minWidth: 120
        },
        {
          title: '规格',
          key: 'spec',
          align: 'center',
          minWidth: 120
        },
        {
          title: '商品管理区域',
          key: 'productManagerName',
          align: 'center',
          minWidth: 150
        },
        {
          title: '主单位',
          key: 'mainUnitName',
          align: 'center',
          minWidth: 120
        },
        {
          title: '主单位价格',
          key: 'mainUnitPrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '辅单位',
          key: 'auxiliaryUnitName',
          align: 'center',
          minWidth: 120
        },
        {
          title: '辅单位价格',
          key: 'auxiliaryUnitPrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '价格组',
          key: 'priceGruopName',
          align: 'center',
          minWidth: 120
        },
        {
          title: '面价',
          key: 'facePrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '进价',
          key: 'purchasePrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '成本价',
          key: 'costPrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '现金价',
          key: 'cashPrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '标准毛利率',
          key: 'cashPriceGrossRate',
          align: 'center',
          minWidth: 120
        },
        {
          title: '售价',
          key: 'salePrice',
          align: 'center',
          minWidth: 120
        },
        {
          title: '标准毛利率',
          key: 'salePriceGrossRate',
          align: 'center',
          minWidth: 120
        },
        {
          title: '品牌',
          key: 'brand',
          align: 'center',
          minWidth: 120
        },
        {
          title: '档次',
          key: 'grade',
          align: 'center',
          minWidth: 120
        },
        {
          title: '历史采购额',
          key: '',
          align: 'center',
          minWidth: 120
        },
        {
          title: '历史采购频次',
          key: '',
          align: 'center',
          minWidth: 120
        },
        {
          title: '上游单号',
          key: 'orderNo',
          align: 'center',
          minWidth: 120
        }
      ]
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 获取表格的数据
    getData () {
      this.loading = true;
      // 开始请求列表
      let datas = {
        uuid: this.$route.query.uuid
      };
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        datas,
        true
      ).then((res) => {
        let that = this;
        if (res.retStatus == '1') {
          this.viewInfo = res.retData;
          let rData = res;
          this.tableDataList = rData.retData.detailList;
          if (this.tableDataList[0]) {
            for (var i = 0; i < this.tableDataList[0].detailList.length; i++) {
              let newItem = {
                title: '比价对象' + (i + 1),
                align: 'center',
                children: [
                  {
                    title: '品牌',
                    key: that.tableDataList[0].detailList[i].brand,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '档次',
                    key: that.tableDataList[0].detailList[i].grade,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '售价',
                    key: that.tableDataList[0].detailList[i].salePrice,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '销量',
                    key: that.tableDataList[0].detailList[i].sale,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '库存',
                    key: that.tableDataList[0].detailList[i].kucun,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '销售方式',
                    key: that.tableDataList[0].detailList[i].type,
                    align: 'center',
                    width: 200
                  },
                  {
                    title: '客户类型',
                    key: that.tableDataList[0].detailList[i].leixing,
                    align: 'center',
                    width: 200
                  }
                ]
              };
              this.columns.push(newItem);
            }
          }
          this.loading = false;
        }
      });
    },
    handleClickMore (name, row) {
      if (name === 'Delete') {
        this.$Modal.confirm({
          title: '删除操作',
          content: '确定删除此数据吗？',
          onOk: () => {
            let data = {
              uuid: row.uuid
            };
            // 开始请求商品列表
            ApiRequest(
              this.requestApi.delTableList.url,
              this.requestApi.delTableList.type,
              data
            ).then((res) => {
              this.$Message.success('删除成功');
              this.actionsChange();
            });
          }
        });
      } else {
        let obj = {}; // 动作的对象信息
        row.actions.forEach((item) => {
          if (name === item.name) {
            obj = item;
            return false;
          }
        });
        this.setTableRowData(row);
        if (obj.handleType === 'link') {
          // 操作类型为链接时，拼接参数跳转
          let jumpPath = this.basePath + obj.name;
          this.$router.push({
            path: jumpPath,
            query: {
              uuid: row.uuid,
              orderType: row.orderType
            }
          });
        } else if (obj.handleType === 'prop') {
          // 操作类型为弹窗时 打开弹窗
          if (obj.name === 'viewing') {
            this.showPropviewing = true;
          } else if (obj.name === 'view') {
            this.showPropviewing = true;
          } else {
          }
        } else {
          // 操作类型为弹窗时 打开弹窗
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}

.marginTop10 {
  margin: 5px 0;
}
</style>
